<template>
  <div class="all-header">
    <div class="all">全部分类</div>
  </div>
  <ul class="all-item">
    <li class="all-item-li" v-for="item in 8" :key="item">
      <a href="/" style="cursor: pointer">
        <img src="../../../images/all-item.png" alt="" />
        <p class="img-title">哈哈哈</p>
      </a>
    </li>
  </ul>
</template>

<script setup lang="ts"></script>
<style scoped lang="less">
.all-header {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 0;
}
.all {
  font-size: 22px;
  padding: 30px 0;
  text-align: center;
  color: #666;
  font-weight: 400;
}
.all-item {
  display: flex;
  background-color: #fff;
  padding: 0 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.all-item-li {
  width: 100px;
  height: 180px;
  margin: 0 30px;
  &:hover .img-title {
    color: #27ba9b;
  }
  img {
    width: 100px;
    height: 100px;
  }
}
.img-title {
  font-size: 16px;
  padding: 20px 0;
  text-align: center;
}
</style>
